<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item
        v-for="item in breadList" :key="item.id"
    >
      {{ item.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue';
import {useRoute} from 'vue-router';
import {ArrowRight} from '@element-plus/icons-vue';

const route = useRoute();
const breadList = ref([]);

const getCurrentPath = () => {
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
};

onMounted(() => {
  getCurrentPath();
});

function getN() {

}

watch(route, (to) => {
  breadList.value = to.matched.filter(item => item.meta && item.meta.title);
}, {immediate: true});
</script>

<style scoped>
.el-breadcrumb {
  margin-bottom: 16px;
}
</style>
